<template>
  <div class="user-list-container">
    <!-- 查询表单 -->
    <el-card shadow="never" class="search-card">
      <el-form :model="queryParams" ref="queryForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="queryParams.search"
              placeholder="请输入用户名,手机号进行搜索"
              clearable
            />
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-table
     class="table"
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column prop="user_id" label="ID" width="80" />
        <el-table-column prop="user_avatar" label="头像" width="100">
          <template #default="scope">
            <el-avatar 
              :size="40" 
              :src="scope.row.user_avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
              @click="openDetailDialog(scope.row)"
              style="cursor: pointer;"
            />
          </template>
        </el-table-column>
        <el-table-column prop="nick_name" label="昵称" />
        <el-table-column prop="user_last_name" label="姓氏" />
        <el-table-column prop="user_first_name" label="名字" />
        <el-table-column prop="user_gender" label="性别">
          <template #default="scope">
            {{ scope.row.user_gender==1?"男":"女"}}
          </template>
        </el-table-column>
        <el-table-column prop="user_phone" label="手机号">
          <template #default="scope">
            {{ encryptPhone(scope.row.user_phone) }}
          </template>
        </el-table-column>
        <el-table-column prop="user_birthday" label="用户生日" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button link type="primary" @click="openDetailDialog(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />

    <!-- 用户详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="用户详情"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户ID">{{ detailData.user_id }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar 
            :size="60" 
            :src="detailData.user_avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
          />
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ detailData.nick_name }}</el-descriptions-item>
        <el-descriptions-item label="姓氏">{{ detailData.user_last_name }}</el-descriptions-item>
        <el-descriptions-item label="名字">{{ detailData.user_first_name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ detailData.user_gender == 1 ? "男" : "女" }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detailData.user_phone }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ detailData.user_birthday }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.created_at }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detailData.updated_at }}</el-descriptions-item>
      </el-descriptions>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import tableMixin from "@/mixins/tableMixin";
import api from "@/request/api.js";

export default {
  name: "UserList",
  mixins: [tableMixin],
  data() {
    return {
      // 查询参数
      queryParams: { 
        search: "" 
      },
      apimodel: "user",
      apival: "getList",
      
      // 详情对话框
      detailDialogVisible: false,
      detailData: {},
      
      // 雷达图相关数据（如果需要可以保留）
      form: {
        now_info: {},
        last_quarter_info: {}
      }
    };
  },
  methods: {
    // 加密手机号（显示前3后4位）
    encryptPhone(phone) {
      if (!phone) return '';
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    },
    
    // 打开详情对话框
    openDetailDialog(row) {
      // 直接使用当前行数据，避免再次请求
      // this.detailData = { ...row };
      
      // 如果需要更多详细数据，可以取消下面注释的代码
      api.user.getUserDetail({ user_id: row.user_id }).then((res) => {
        if (res.data.code === 200) {
          this.detailData = res.data.content.data;
          this.detailDialogVisible = true;
        } else {
          this.$message.error(res.data.message || '获取用户详情失败');
        }
      }).catch(error => {
        this.$message.error('获取用户详情失败');
        console.error(error);
      });
      
      this.detailDialogVisible = true;
    }
  },
  created() {
    // 可以在这里初始化数据或调用接口
  }
};
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}
.search-card {
  margin-bottom: 20px;
}
.table-card {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>